<template>
  <div>

    <div class="chain-link-bar-wrapper">
  		<el-breadcrumb separator-class="el-icon-arrow-right">
	  		<el-breadcrumb-item>风采管理</el-breadcrumb-item>
	  		<el-breadcrumb-item to="/news/listOfMember">个人风采列表</el-breadcrumb-item>
	  	</el-breadcrumb>
	  </div>



    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>个人风采列表</span>

      </div>
        <div class="app-diliver-10"></div>
        <div class="clearfix app-tabs-wrapper color-black-third">
            <span :class="{'color-theme': page.status == -1}" class="app-tab app-margin-r-40" @click="selectTabStatus(-1)">全部</span>
            <span :class="{'color-theme': page.status == 0}" class="app-tab app-margin-r-40" @click="selectTabStatus(0)">未审核</span>
            <span :class="{'color-theme': page.status == 3}" class="app-tab app-margin-r-40" @click="selectTabStatus(3)">审核通过</span>
            <span :class="{'color-theme': page.status == 1}" class="app-tab app-margin-r-40" @click="selectTabStatus(1)">不通过</span>
            <span :class="{ 'color-theme': page.status == 2 }" class="app-tab app-margin-r-40" @click="selectTabStatus(2)">已删除</span>
        </div>
        <div class="app-diliver-15"></div>
        <div class="app-diliver-15"></div>

      <div>
        <div class="app-display-inline app-margin-h-20">
          <span class="color-black-second font-size-text">关键字：</span>
          <el-input
            clearable
            placeholder="手机号 姓名 风采标题"
            v-model="page.keyWord"
            style="width: 380px;"
              ></el-input>
        </div>
          <div class="app-diliver-15"></div>
          <div class="app-diliver-15"></div>
        <div class="app-display-inline app-margin-h-20">
          <SubmitButton
            type="primary"
            plain
            icon="el-icon-search"
            :post-option="{
              url: searchUrl,
              data: page,
              callback: searchCB
            }"
            >搜索</SubmitButton>
        </div>
      </div>

      <div class="app-diliver-15"></div>
      <div class="app-diliver-15"></div>

      <el-table :data="newsList" stripe border @sort-change="sortMethod" style="width: 100%" class="nc-table-btn-ctrl">
        <el-table-column type="index" :index="indexMethod">
        </el-table-column>

        <el-table-column
          label="会员">
          <template slot-scope="scope">
            <span>{{scope.row.real_name}}</span>
            <br>
            <span>{{scope.row.phone}}</span>
          </template>
        </el-table-column>


        <el-table-column
          label="标题"
          prop="title">
        </el-table-column>

        <el-table-column
          label="介绍"
          prop="intro">
            <template slot-scope="scope">
                <span v-if="scope.row.intro != undefined && scope.row.intro.length > 100">
                {{ scope.row.intro.substring(0,100) }}...
                </span>
                <span v-else>
                {{ scope.row.intro }}
                </span>
            </template>
        </el-table-column>

        <el-table-column
          label="封面">
          <template slot-scope="scope">
            <el-image style="width: 50px; margin: 0 5px 5px 0;" v-for="item in scope.row.coverList" :preview-src-list="scope.row.coverList" :src="item"/>
          </template>
        </el-table-column>

        <el-table-column
          label="详情图片">
          <template slot-scope="scope">
				<el-image style="width: 50px;max-height: 150px; margin: 0 5px 5px 0;" v-for="item in scope.row.newsDetailList" :preview-src-list="scope.row.newsDetailList" :src="item"/>
          </template>
        </el-table-column>

        <el-table-column
          label="发布时间"
          prop="date_time"
		  sortable="custom">
        </el-table-column>

		<el-table-column  prop="status" label="审核状态">
			<template slot-scope="scope">
				<span class="text-bold color-warning" v-if="scope.row.status == '0'">待审核</span>
				<span class="text-bold color-warning" v-if="scope.row.status == '1'">未通过</span>
				<span class="text-bold color-danger" v-if="scope.row.status == '2'">已删除</span>
				<span class="text-bold color-success" v-if="scope.row.status == '3'">通过</span>
			</template>
		</el-table-column>

        <el-table-column
          label="操作">
          <template slot-scope="scope">
			<!--  <el-button v-if="scope.row.statis != '1'" type="success" plain size="mini"
			  @click="checkStatusHandle(scope.row.id, 1)">通过</el-button>
			  <el-button v-if="scope.row.statis != '2'" type="warning" plain size="mini"
			  @click="checkStatusHandle(scope.row.id, 0)">不通过</el-button>
			  -->
              <div v-if="scope.row.status != 2">
                  <NcButton
                    size="mini"
                    type="success"
                    :post-option="{ url: checkPassUrl, callback: getPage, confirm: '通过风采【' + scope.row.title + '】吗？', data: { id: scope.row.id } }"
                    class="app-margin-l-10 app-margin-v-5"
                  >
                  通过
                  </NcButton>
                  <NcButtonNews
                    size="mini"
                    type="warning"
                    :post-option="{ url: checkFailUrl, callback: getPage, confirm: '不通过风采【' + scope.row.title + '】？', data: { id: scope.row.id } }"
                    class="app-margin-l-10 app-margin-v-5"
                  >
                    不通过
                  </NcButtonNews>


                  <NcButton
                    size="mini"
                    type="danger"
                    :post-option="{ url: deleteUrl, callback: getPage, confirm: '确定要删除风采【' + scope.row.title + '】吗？', data: { id: scope.row.id } }"
                    class="app-margin-l-10 app-margin-v-5"
                  >
                    删除
                  </NcButton>

                <a class="" :href="'#/news/detailOfMember/' + scope.row.id" target="_blank">
                  <el-button
                  plain
                  size="mini"
                  >详情</el-button>
                </a>
              </div>
          </template>
        </el-table-column>
      </el-table>


      <div class="pager-bar-wrapper">
        <el-pagination
          background
          layout="prev, pager, next, total"
          :total="page.totalRow"
          :page-size="page.pageSize"
          :current-page="page.pageNum"
          @current-change="pageNumChange"
          @prev-click="pageNumChange"
          @next-click="pageNumChange"
          @size-change="pageSizeChange"
          >
        </el-pagination>
      </div>

    </el-card>

  </div>
</template>


<script>

  import NcButton from '../common/NcButton'
  import NcButtonNews from './NcButtonNews.vue'
  import SubmitButton from '../common/SubmitButton'

  import Api from '../../api/Api'
  import NewsApi from '../../api/NewsApi'
  import JsonKit from '../../kit/JsonKit.js';

  import { mapGetters } from 'vuex'

  export default {
  	components: {
  		NcButton, SubmitButton,NcButtonNews
  	},
  	data(){
  	  return {
        newsList: [],
		editProcurement: {},
		checkYes: 0,
		checkStatusEditVisible: false,
		deleteUrl: NewsApi.URL_DELETE,
		checkPassUrl: NewsApi.URL_CHECK_STATUS_PASS,
		checkFailUrl: NewsApi.URL_CHECK_STATUS_FAIL,
        page: {
			keyWord: '',
            status: -1,
			columnProp: '',
			columnOrder: '',
			pageNum: 1,
			pageSize: 10
        },

        searchUrl: NewsApi.URL_LIST_MEMBER,
  	  }
  	},
  	computed: {
  	  ...mapGetters(['hasPerm'])
  	},
  	created(){
  	  this.getPage();

      //this.$root.eventHub.$on('closeEditDialog', this.hideEditDialog);
  	},
    beforeDestroy: function(){
      //this.$root.eventHub.$off('closeEditDialog', this.hideEditDialog);
    },
  	methods: {
		checkStatusHandle(newsId, checkYes) {
			this.editProcurement = JsonKit.getOf(this.newsList, 'id', newsId, null);
			this.checkYes = checkYes;
			this.checkStatusEditVisible = true;
		},
        selectTabStatus(status){
            this.page.status = status;
            this.page.pageNum = 1;
            this.getPage();
        },
		sortMethod(column) {
			this.page.columnProp = column.prop;
			this.page.columnOrder = column.order;
			this.getPage();
		},
      searchCB(json){
        this.newsList = json.list;
        this.setPage(json);
      },
      getPage(){
        NewsApi.listOfMember(this.page, json=>{
          this.newsList = json.list;
          this.setPage(json);
		  console.log(json)
        });
      },
      pageNumChange(pageNum){
        this.page.pageNum = pageNum;
        this.getPage();
      },
      pageSizeChange(pageSize){
        this.page.pageSize = pageSize;
        this.getPage();
      },
      setPage(json){
        this.page.pageNum = json.pageNum;
        this.page.pageSize = json.pageSize;
        this.page.totalRow = json.totalRow;
      },
      indexMethod(index){
        return index + 1 + (this.page.pageNum - 1) * this.page.pageSize
      },
  	}
  }
</script>
